<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/base.css">
		<style>
			/* 当前页面内部样式 */
		.db-search{
			margin: .3rem .4rem .2rem;
		}
		.db-movie-list{
			/* margin-bottom: 1rem; */
		}
		.db-movie-list .mui-media-object{
			max-width: 1.4rem;
			width: 1.4rem;
			height: auto;
		}
		.db-movie-list .mui-media-body{
			font-size: .38rem;
			line-height: .5rem;
		}
		.db-movie-list .mui-media-body .mui-ellipsis span{
			color: #ff6464;
		}
	</style>
	</head>
	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">热映</h1>
		</header>

		<!-- 内容主容器 -->
		<div class="mui-content" id="app">

			<!-- 搜索框 -->
			<div class="mui-input-row mui-search db-search">
				<input type="search" class="mui-input-clear" placeholder="电影/电视剧/影人">
			</div>
			<!--下拉刷新容器-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron db-movie-list">
						<li class="mui-table-view-cell mui-media" v-for="item in movies" v:key="item.id" @tap="lookDetail(item.id)">
							<a class="mui-navigate-right">
								<img class="mui-media-object mui-pull-left" :src="item.images.large">
								<div class="mui-media-body">
									{{item.title}}
									<p class='mui-ellipsis'>{{item.genres}} <span>{{item.rating.average}}分</span></p>
									<p class='mui-ellipsis'>导演：{{item.directors[0].name}}</p>
									<p class='mui-ellipsis'>主演：{{item.actors}}</p>
								</div>
							</a>
						</li>

					</ul>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js" type="text/javascript"></script>
		<script type="text/javascript">
			mui.init();
			let moviesDetail;
			mui.plusReady(function() {

				moviesDetail = plus.webview.getWebviewById("myDetail"); //详细页的窗口对象
				if (!moviesDetail) {
					console.log(1);
					// 预加载页面
					moviesDetail = mui.preload({ //预加载自动创建了窗口，加载了文件
						url: '../pages/movieDetail.html',
						id: "myDetail" //这个也是webview的id

					})
				}
			})

			let app = new Vue({
				el: "#app",
				data: {
					movies: [],
					pn: 1 //起始页码1
				},
				methods: {
					// 点击事件的方法
					lookDetail(id) {
						// mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
						mui.fire(moviesDetail, 'getMovie', {
							mid: id
						})

						// mui 提供打开窗口的方法
						mui.openWindow({ // 打开窗口之前
							// url: '../pages/movieDetail.html'
							id: 'myDetail'
						});
					}
				}

			})
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			function pulldownRefresh() {
				// console.log('11')
				// 允许上拉加载
				app.pn = 1;
				app.movies = [];
				mui('#pullrefresh').pullRefresh().endPulldown(false);
				pullupRefresh();

			}

			function pullupRefresh() {
				// console.log('22');
				/* 		以下的不可以跨域
						mui.ajax('http://api.douban.com/v2/movie/in_theaters', {
							data: {
								start: 0,
								count: 10,
								city: '广州',
								apikey: '0df993c66c0c636e29ecbb5344252a4a'
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 1000000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								//服务器返回响应，根据响应结果，分析是否登录成功；
								console.log('33');
								console.log(data)
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								console.log('344');
								console.log(errorThrown);
							}
						}); */
				mui.getJSON('http://t.yushu.im/v2/movie/in_theaters', {
					start: (app.pn - 1) * 10, // 起始记录的下标，第1页第1条记录是 0
					count: 10, // 每页显示的条数
					city: '广州',
					apikey: '0df993c66c0c636e29ecbb5344252a4a'
				}, function(data) { //json对象
					//服务器返回响应，根据响应结果，分析是否登录成功；
					// console.log(JSON.stringify(data)); // 输出json字符串进行调试
					let total = data.total;
					// let total=14;//后的数据只有14条
					let subjects = data.subjects;
					if (subjects.length > 0) {

						subjects.forEach((v) => {
							// 对电影类型genres进行操作，转成 / 拼接
							v.genres = v.genres.join("/")
							// console.log(v.genres);

							let arr = [];
							// 抽离出主演
							v.casts.forEach((item) => {
								arr.push(item.name)
							})
							v.actors = arr.join('/');
							// console.log(v.actors);
						})



						// 赋值
						app.movies = app.movies.concat(subjects);
						// console.log(app.movies.length)
						// console.log(app.movies.length >= total)
						// 页码加1
						app.pn = app.pn + 1;
						// 允许上拉加载
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(app.movies.length >= total);
					}
				}, function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
				});
			}
		</script>
	</body>
</html>
